<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>JSX声明式UI</title>
	</head>
	<body>
		<div id="app"></div>
		
		<!-- 
			按顺序
			引入react核心模块、react DOM模块、babel模块
		-->
		<script src="./js/react17.development.js"></script>
		<script src="./js/react-dom17.development.js"></script>
		<script src="./js/babel.min.js"></script>
		<!--
			JavaScript中使用JSX语法
			需要type单独指定babel编译执行
		-->
		<script type="text/babel">
			// 声明了一段ui结构赋值给一个变量div存储
			let div = 	<div>
							<h2>春晓 <small>作者: 孟浩然</small></h2>
							<p>春眠不觉晓</p>
							<p>处处闻啼鸟</p>
							<p>夜来风雨声</p>
							<p>花落知多少</p>
						</div>
					
			// 渲染到页面中使用
			ReactDOM.render(div, document.querySelector("#app"))
		</script>
	</body>
</html>